<template>
  <div class="customer-management">
    <h1>客户数据统计</h1>
    <div style="display: flex;margin-top: 10px;" class="animate__animated animate__bounceInDown">
      <div class="content" style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">总客户数</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class="iconfont icon-yuangong" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{data.request.custotal}} (人)</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content" style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">今日新增客户</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class=" iconfont icon-shangsheng" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
            <div style=""><span style="font-size: 28px;">{{data.request.todaycus}} (人)</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content" style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">总体客户进度</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class="iconfont icon-yuangong" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{data.request.totalrecord}}%</span></div>

            </div>
          </div>
        </div>
      </div>
      <div class="content " style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">今日新增会员</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class=" iconfont icon-shangsheng" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{data.request.todayvip}}(人)</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 每日新增客户趋势图表 -->


    <div class="customerAdd animate__animated animate__slideInLeft">
      <div class="cusadd_left  suspension">
        <div style="width: 100%;height: 30px;font-size: 18px;text-align: center;border-bottom:1px solid #eee;">
          客户增长情况
        </div>
        <div ref="newCustomersChartRef" style="width: 100%;height: 100%;">
        </div>
      </div>
      <div class=" cusadd_right suspension">
        <div style="width: 100%;height: 30px;font-size: 18px;text-align: center;border-bottom:1px solid #eee;">
          客户来源
        </div>

        <div ref="cuschar" style="width: 100%; height: 350px;">

        </div>

      </div>


    </div>


    <!-- 客户跟进次数趋势图表 -->
    <div class="suspension">
      <div class="cus_count  animate__animated animate__slideInRight">

        <div style="width: 100%;height: 30px;font-size: 18px;text-align: center;border-bottom:1px solid #eee;">
          客户成功率趋势
        </div>
        <div ref="visitorFlowChartRef" class="chart " style="width: 100%; height: 400px"></div>

      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import { CusTotal, GetCusSuccessCount, GetSourceCount, GetWeekCustomerCount, TodayCusTotal, TodayVipCount } from '@/api/count';
import Api_Code from '@/Dto/Response/Api_code';
import type { customer_Dto } from '@/Dto/Request/customer/customer_Dto';
import { AvgCusRecord } from '../../api/count';



// 图表 DOM 引用
const newCustomersChartRef = ref<HTMLElement | null>(null);
const visitorFlowChartRef = ref<HTMLElement | null>(null);
const cuschar = ref<HTMLElement | null>(null);

const data=reactive<customer_Dto>({
  request:{
        custotal:'',
        todaycus:'',
        totalrecord:'',
        todayvip:'',
        customerAdd:[],
        cussource:[],
        cussuccess:[]
    }


})

const methods = {
    async bind(){
       //客户总数
       const res=await CusTotal()
        if(res.code===Api_Code.ok){
            data.request.custotal=res.data
        }
        const todaycus=await TodayCusTotal()
        if(todaycus.code===Api_Code.ok){
          data.request.todaycus=todaycus.data
        }
        const totalrecord=await AvgCusRecord()
        if(totalrecord.code===Api_Code.ok){
          data.request.totalrecord=totalrecord.data
        }
        const todayvip=await TodayVipCount()
        if(todayvip.code===Api_Code.ok){
          data.request.todayvip=todayvip.data
        }
       const cusadd=await  GetWeekCustomerCount()
        if(cusadd.code===Api_Code.ok){
          data.request.customerAdd=cusadd.data
          
        }
        const cussource=await GetSourceCount()
        if(cussource.code===Api_Code.ok){
          data.request.cussource=cussource.data
          
        }
        const cussuccess=await GetCusSuccessCount()
        if(cussuccess.code===Api_Code.ok){
          data.request.cussuccess=cussuccess.data
          
        }

    },

  //绘制客户来源
  cusEach() {
    if (cuschar.value) {
      const pack = echarts.init(cuschar.value);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '客户来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data.request.cussource
          }
        ]
      };
      option && pack.setOption(option);
    }
  },
  // 绘制每日新增客户趋势图表
  drawNewCustomersChart() {
    if (newCustomersChartRef.value) {
      const chart = echarts.init(newCustomersChartRef.value);
      const option = {
        xAxis: {
          type: 'category',
          data: data.request.customerAdd.map((d:any)=>d.dayOfWeek)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.request.customerAdd.map((d:any)=>d.count),
            type: 'line',
            smooth: true,
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut'
          }
        ]
      };
      chart.setOption(option);
    }
  },
  // 绘制客户跟进次数趋势图表
  drawVisitorFlowChart() {
    if (visitorFlowChartRef.value) {
      const chart = echarts.init(visitorFlowChartRef.value);
      const option = {
        xAxis: {
          type: 'category',
          data: data.request.cussuccess.map((d:any)=>d.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.request.cussuccess.map((d:any)=>d.success),
            type: 'bar',
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut'
          }
        ]
      };
      chart.setOption(option);
    }
  }
}


onMounted(async() => {
  await methods.bind()
  methods.drawNewCustomersChart();
  methods.drawVisitorFlowChart();
  methods.cusEach();
});
</script>

<style scoped>
.cus_count {
  background: #ffffff;
  width: 100%;
  border-radius: 8px;
}

.cusadd_right {
  flex: 1;
  height: 380px;
  background: #ffffff;
  margin-left: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.cusadd_left {
  width: 50%;
  height: 380px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.customerAdd {
  display: flex;
  width: 100%;
  margin-top: 10px;
  height: 400px;
}

.customer-management {
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 8px;
}

.small-panel {
  background-color: #d0e4fe;
  border-radius: var(--el-border-radius-base);
  padding: 25px;
  margin-bottom: 20px;
}

.small-panel .small-panel-title {
  color: #656667;
  font-size: 16px;
}


.small-panel .small-panel-content {
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
  color: #2f3031;
}

.content {
  width: 25%;

}

.suspension {
  transition: all 0.3s ease;
}

.suspension:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 14px 24px #0003;
}
</style>